<template>
  <div>
    <!-- <VuePeity :type="'line'" :options="{ fill: '', stroke: 'green',strokeWidth: 2, min: 2500, width: 200, height:40 }" :data="pieData"></VuePeity> -->
    <!-- <peity :type="'line'" :options="{ fill: '', stroke: 'red',strokeWidth: 2, min: 2500, width: 250, height:50 }" :data="pieData"></peity> -->
    <a-table :columns="columns" :data-source="listData" class="components-table-demo-nested">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'name'">
          <a-row type="flex" align="middle">
            <img :src="record.image" style="width: 22px;margin-right: 4px;" alt="">
            <a-col style="margin-right: 4px;">{{ record.name }}</a-col>
            <a-col>{{ record.en }}</a-col>
          </a-row>
        </template>
        <template v-if="column.key === 'price'">
          <router-link :to="{path: '/peityInfo', query: { type: record.originName } }" style="color: #333;font-weight: 500;">{{ record.price }}</router-link>
        </template>
        <template v-if="column.key === 'hour'">
          <a-row type="flex" align="middle" :style="{ 'color': record.hour >= 0 ? 'green' : 'red' }">
            <a-col>
              <caret-up-outlined style="color: green;" v-if="record.hour >= 0" />
              <caret-down-outlined style="color: red;" v-else />
            </a-col>
            <a-col>{{ Math.abs(record.hour) }}%</a-col>
          </a-row>
        </template>
        <template v-if="column.key === 'day'">
          <a-row type="flex" align="middle" :style="{ 'color': record.day >= 0 ? 'green' : 'red' }">
            <a-col>
              <caret-up-outlined style="color: green;" v-if="record.day >= 0" />
              <caret-down-outlined style="color: red;" v-else />
            </a-col>
            <a-col>{{ Math.abs(record.day) }}%</a-col>
          </a-row>
        </template>
        <template v-if="column.key === 'action'">
          <VuePeity :type="'line'" :options="{ fill: '', stroke: record.hour >= 0 ? 'green' : 'red',strokeWidth: 2, min: 2500, width: 200, height:40 }" :data="record.sevent"></VuePeity>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script>
import VuePeity from '@/components/vue-peity/Peity.vue'
export default {
  name: 'DemoPeity',
  data () {
    return {
      originData: {},
      columns: [
        { title: 'ID', dataIndex: 'id', key: 'id' },
        { title: '名称', dataIndex: 'name', key: 'name' },
        { title: '价格', dataIndex: 'price', key: 'price' },
        { title: '24h%', dataIndex: 'hour', key: 'hour' },
        { title: '7d%', dataIndex: 'day', key: 'day' },
        { title: '成交额', dataIndex: 'turnover', key: 'turnover' },
        { title: '流通量', dataIndex: 'circulation', key: 'circulation' },
        { title: '7天趋势', dataIndex: 'sevent', key: 'action' }
      ],
      listData: []
    }
  },
  components: {
    VuePeity
  },
  mounted () {
    const data = {
      bitcoin: [
        '比特币',
        'BTC',
        'bitcoin.png',
        '16880.21',
        '1',
        '0.03',
        '0.1',
        '324844972547',
        '19244131',
        '4824237909',
        '285792.52',
        '19244131',
        '19244131',
        '21000000',
        '1',
        '0.9164',
        '0.99,0.99,1,1,0.99,1,0.99,0.99,1,1,0.99,0.99,1,1,1,0.99,1,1,1,1,1,1,0.99,1,1,1,1,1,1'
      ],
      ethereum: [
        '以太坊',
        'ETH',
        'ethereum.png',
        '1225.12',
        '0.072578',
        '0.33',
        '0.68',
        '149922670713',
        '8881564',
        '2013523420',
        '119283.07',
        '122373866',
        '122373866',
        '0',
        '2',
        '0',
        '0.99,0.99,0.99,1,0.99,0.99,0.99,0.99,0.99,0.99,0.97,0.99,1,1,0.99,1,0.99,1,1,1,1,1,0.99,1,1,1,0.99,0.99,1'
      ],
      tether: [
        '泰达币',
        'USDT',
        'tether.png',
        '0.9995',
        '0.00005921',
        '0',
        '-0.04',
        '69827981286',
        '4136868',
        '5652227160',
        '334858.88',
        '69862912743',
        '73141766321',
        '0',
        '3',
        '0',
        '1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1'
      ],
      usdc: [
        'USD Coin',
        'USDC',
        'usdc.png',
        '0.999',
        '0.00005918',
        '-0.11',
        '-0.08',
        '45253330204',
        '2681050',
        '333246943',
        '19743.33',
        '45298628833',
        '43156360391',
        '0',
        '4',
        '0',
        '1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1'
      ],
      'binance-coin': [
        '币安币',
        'BNB',
        'binance-coin.png?v=1658909552',
        '243.06',
        '0.014399',
        '-0.26',
        '-2.25',
        '38884014967',
        '2303527',
        '268218465',
        '15889.52',
        '159977022',
        '159979964',
        '200000000',
        '5',
        '0.7999',
        '0.99,0.99,0.99,1,0.99,0.99,0.99,0.98,0.98,0.98,0.96,0.98,0.98,0.98,0.98,0.98,0.98,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.96,0.96,0.97'
      ],
      binanceusd: [
        'Binance USD',
        'BUSD',
        'binanceusd.png',
        '1.0006',
        '0.00005927',
        '0.02',
        '0.06',
        '23466839520',
        '1390269',
        '4107348586',
        '243335.7',
        '23452767860',
        '17300690255',
        '0',
        '6',
        '0',
        '1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1'
      ],
      ripple: [
        '瑞波币',
        'XRP',
        'ripple.png',
        '0.3629',
        '0.00002149',
        '3.83',
        '5.49',
        '18288513003',
        '1083429',
        '706809350',
        '41872.07',
        '50395461568',
        '99989184828',
        '100000000000',
        '7',
        '0.5040',
        '0.94,0.94,0.95,0.97,0.93,0.94,0.94,0.95,0.94,0.95,0.94,0.95,0.96,0.96,0.96,0.97,0.97,0.96,0.96,0.96,0.96,0.95,0.95,0.95,0.96,0.96,0.98,1,0.99'
      ],
      dogecoin: [
        '狗狗币',
        'DOGE',
        'dogecoin.png',
        '0.075284',
        '0.00000445',
        '-1.37',
        '2.42',
        '9987985819',
        '591698',
        '181616715',
        '10759.15',
        '132670764300',
        '132670764300',
        '0',
        '8',
        '0',
        '0.96,0.95,0.95,0.96,0.92,0.94,0.93,0.93,0.94,0.94,0.96,0.98,1,1,0.99,0.98,0.99,0.99,0.99,0.99,0.99,0.98,0.95,0.97,0.97,0.97,0.97,0.95,0.96'
      ],
      cardano: [
        '艾达币',
        'ADA',
        'cardano.png',
        '0.2647',
        '0.00001568',
        '1.5',
        '4.83',
        '9134699690',
        '541148',
        '98655694.38',
        '5844.45',
        '34509632378',
        '35285627462',
        '45000000000',
        '9',
        '0.7669',
        '0.99,0.95,0.97,0.98,0.98,0.98,0.94,0.96,0.95,0.95,0.96,0.96,0.95,0.97,0.98,0.99,0.98,0.98,0.98,0.98,0.98,0.98,0.98,0.97,0.98,0.98,0.98,1,1'
      ],
      matictoken: [
        'Polygon',
        'MATIC',
        'matictoken.png',
        '0.8136',
        '0.00004819',
        '1.71',
        '2.12',
        '7215607425',
        '427460',
        '118677790',
        '7030.58',
        '8868740690',
        '10000000000',
        '10000000000',
        '10',
        '0.8869',
        '0.98,0.98,0.98,0.99,0.97,0.98,0.97,0.97,0.97,0.97,0.96,0.97,0.99,0.99,0.98,0.98,0.98,0.98,0.98,0.98,0.98,0.98,0.97,0.98,0.98,0.99,0.98,1,1'
      ],
      dai: [
        'Dai Stablecoin',
        'DAI',
        'dai.png',
        '1.0007',
        '0.00005928',
        '-0.05',
        '0.11',
        '6830192094',
        '404648',
        '20163551.6',
        '1194.56',
        '6825414304',
        '5835739715',
        '0',
        '11',
        '0',
        '0.99,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0.99,0.99,0.99,1,0.99,1,1,1,1,1,1,1,1,1'
      ],
      okb: [
        'OK币',
        'OKB',
        'okb.png?v=1642572735',
        '23.1195',
        '0.001369',
        '-0.05',
        '2.44',
        '5817504575',
        '344635',
        '15192861.13',
        '900.03',
        '251627612',
        '300000000',
        '300000000',
        '12',
        '0.8388',
        '0.94,0.95,1,0.99,0.97,0.97,0.98,0.97,0.98,0.98,0.94,0.95,0.95,0.95,0.95,0.96,0.95,0.95,0.94,0.94,1,1,1,1,1,1,0.99,1,1'
      ]
    }
    var arr = []
    for (const i in data) {
      var obj = {
        name: data[i][0],
        en: data[i][1],
        id: data[i][14],
        price: data[i][3],
        turnover: data[i][9],
        circulation: data[i][8],
        sevent: data[i][16],
        hour: data[i][5],
        day: data[i][6],
        originName: i,
        image: 'https://s1.coincarp.com/logo/1/' + data[i][2]
      }
      arr.push(obj)
    }

    this.listData = arr
  }
}
</script>

<style>
html{
height: 100%;
}
body{
height: 100%;
margin:0;
}
#app{
height:100%;
}

</style>
